<template>
  <div class="wrapper">
    <common-header :content="meTitle"></common-header>
    <common-scroll class="scroll"
                   ref="scroll">
      <div class="scroll-content">
        <user-info :userInfo="userInfo"></user-info>
        <me-list></me-list>
      </div>
    </common-scroll>
    <tab-bar></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import CommonHeader from 'common/header/header'
import CommonScroll from 'common/scroll/scroll'
import UserInfo from './components/user'
import meList from './components/list'
export default {
  name: 'me',
  components: {
    tabBar,
    CommonHeader,
    UserInfo,
    meList,
    CommonScroll
  },
  data () {
    return {
      meTitle: '我的',
      userInfo: {}
    }
  },
  methods: {
    getUserInfo () {
      const userInfo = JSON.parse(this.$localStorage.get('USER_INFO'))
      this.userInfo = userInfo !== null ? userInfo : { userName: '', avatar: '', phone: '' }
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  padding-top 108px
  box-sizing border-box

  .scroll
    top 98px
    bottom 110px
</style>
